<template>
	<view class="container" :style="viewColor" @scroll="handleScroll">
		<view class="header">
			 <!-- :style="{ 'background-image': `url(${domain}/static/images/plant-header.png)`}" -->
			<view class="user_wrapper acea-row">
				<image :src="circleInfo.avatar || '/static/images/f.png'" class="picture"></image>
				<view class="user_text">
					<view class="name acea-row">
						<text>{{circleInfo.title || ''}}</text>
					</view>
					<view class="circle-item-gz">
						<image class="circle-item-gz-icon" :src="domain + '/uploads/default/20230628/2c7d68b982302e32ccfa8c0a3d922319.png'" />
						<view  class="circle-item-gz-num">{{circleInfo.user_circle_count || 0}}粉丝</view> 
					</view>
					<view class="circle-item-gz-user" v-if="circleInfo.user_circle && circleInfo.user_circle.length" @click="circleUserList">
						<image class="circle-item-gz-avatar" v-for="(v,i) in circleInfo.user_circle" :key="i" :src="v.user.avatar || '/static/images/f.png'" />
						<image class="circle-item-gz-avatar" :src="domain + '/uploads/default/20230629/436303b1fccbd3e1714b11990d5b7e28.png'" />
						<view class="circle-item-gz-tl">{{circleInfo.circle_community_count || 0}} 人在讨论</view>
					</view>
					<!-- <view class="circle_recmmand_title" v-if="circle_recmmand_list.length">上下游圈子</view> -->
				</view>
				<view class="create_circle">
					<!-- <button  open-type="share" @click="userShare()" class="follow_btn focus" style="margin-bottom: 30rpx;">
						分享赚佣
					</button> -->
					<view class="follow_btn focus" style="margin-bottom: 12rpx;" @click="first_entry_circle = 2">
						分享赚佣
					</view>
					<view @click="goUrl('/pages/extends/circle_create/index')" class="follow_btn focus" v-if="circleInfo.uid != userInfo.uid" style="margin-bottom: 12rpx;">
						我要建圈
					</view>
					<navigator hover-class="none" :url="'/pages/extends/circle_create/index?id='+circleInfo.id" class="follow_btn focus" style="margin-bottom: 12rpx;" v-else>
						编辑人脉圈
					</navigator>
					<view @click="openPopupQrcode" class="focus">
						<image src="https://img.jukee.net/def/c97a2202311211035293242.png" style="height: 68rpx;" />
					</view>
					<!-- <view class="circle_qr" v-if="circleInfo.qr_code">
						<view class="circle_qr_img" @click="is_popup_qrcode = true"><image :src="circleInfo.qr_code" /></view>
						<view class="circle_qr_tip">微信群码</view>
					</view> -->
				</view>
			</view>
			<view class="circle_recmmand" v-if="circle_recmmand_list.length">
				<view class="circle_recmmand_tit">上下游圈子</view>
				<view class="circle_recmmand_list">
					<view class="circle_recmmand_list_c">
						<image v-for="(item,index) in circle_recmmand_list" :key='index' :src="item.avatar" @click="getAttentionCircles(item.id)" />
					</view>
					<view class="circle_recmmand_left" @click="getCircleListMore">
						<image :src="domain + '/uploads/def/20230719/14cebeb29c3ea11207617106fecbad8b.png'" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>
		<view class="tabNav" style="position: sticky;top: 0;">
			<div class="tabNav-item" @click="setNavs(3)">
				<div class="tabNav-item-name" :class="check_nav == 3 ? 'on' : ''">需求</div>
			</div>
			<div class="tabNav-item" @click="setNavs(1)">
				<div class="tabNav-item-name" :class="check_nav == 1 ? 'on' : ''">人脉圈</div>
			</div>
			<div class="tabNav-item" @click="setNavs(2)" v-if="is_community_video_start == 1">
				<div class="tabNav-item-name" :class="check_nav == 2 ? 'on' : ''">视频</div>
			</div>
			<div class="tabNav-item" @click="setNavs(4)">
				<div class="tabNav-item-name" :class="check_nav == 4 ? 'on' : ''">好货</div>
			</div>
			<div class="tabNav-item" @click="setNavs(5)">
				<div class="tabNav-item-name" :class="check_nav == 5 ? 'on' : ''">圈友</div>
			</div>
			<!-- <div class="tabNav-item-img" @click="addCircleAdvertisement">
				<image :src="domain + '/uploads/def/20230719/81f2caeafd90d9100770b33ac0d35949.png'" mode="widthFix"/>
			</div> -->
		</view>
		<view class="service-select" v-if="check_nav == 1">
			<view class="service-select-btn1" :class="check_nav_two == 1 ? 'service-select-btnon' : ''" @click="check_nav_two = 1">人脉圈介绍</view>
			<view class="service-select-btn2" :class="check_nav_two == 2 ? 'service-select-btnon' : ''" @click="check_nav_two = 2">人脉圈动态</view>
		</view>
		<!-- <view class="child_nav">
			<view class="navs" @click="setNavs(1)" :class="check_nav == 1 ? 'check_nav' : ''">需求</view>
			<view class="navs" @click="setNavs(3)" :class="check_nav == 3 ? 'check_nav' : ''">服务</view>
			<view class="navs" @click="setNavs(2)" :class="check_nav == 2 ? 'check_nav' : ''">视频</view>
			<view class="add_circle_advertisement">
				<view class="add_circle_button" @click="is_add_advertisement = !is_add_advertisement">＋</view>
				<view class="advertisement_button" v-show="is_add_advertisement">
					<view @click="addCircleAdvertisement">发布广告</view>
				</view>
			</view>
		</view> -->
		<view class="circle_advertisement" v-if="check_nav == 1 && check_nav_two == 2">
			<swiper class="swiper" circular interval="3000" duration="500" autoplay="true">
				<swiper-item class="swiper-item" v-if="circle_advertisement.length" v-for="(item,index) in circle_advertisement" :key="index" @click="toCommunityDetail(item.uid)">
					<view class="swiper-item-img"><image :src="item.pic"/></view>
					<!-- <view class="swiper-item-title line2">{{item.title}}</view> -->
				</swiper-item>
				<swiper-item class="swiper-item" @click="addCircleAdvertisement('https://img.jukee.net/def/bb2a5202406070023441118.jpg')">
					<view class="swiper-item-img"><image src="https://img.jukee.net/def/bb2a5202406070023441118.jpg"/></view>
					<!-- <view class="swiper-item-title line2">点击发布广告</view> -->
				</swiper-item>
				<swiper-item class="swiper-item" @click="addCircleAdvertisement('https://img.jukee.net/def/984e6202406070023453348.jpg')">
					<view class="swiper-item-img"><image src="https://img.jukee.net/def/984e6202406070023453348.jpg"/></view>
					<!-- <view class="swiper-item-title line2">点击发布广告</view> -->
				</swiper-item>
				<swiper-item class="swiper-item" @click="addCircleAdvertisement()">
					<view class="swiper-item-img"><image src="https://img.jukee.net/def/1f1ae202401291537038629.jpg"/></view>
					<!-- <view class="swiper-item-title line2">点击发布广告</view> -->
				</swiper-item>
			</swiper>
		</view>
		<view class='circle_content' v-if="list.length || (check_nav == 1 && check_nav_two == 1)">
			<demand :list="list" v-if="check_nav == 3"></demand>
			<view v-else-if="check_nav == 1 && check_nav_two == 1">
				<view style="background-color: #F1F1F1;padding: 30rpx;margin-top: 10rpx;border-radius: 10rpx; white-space: pre-wrap;">
					{{circleInfo.description || '暂无人脉圈介绍'}}
					<template v-if="circleInfo.pics && circleInfo.pics.length">
						<view style="margin-top: 20rpx;"></view>
						<image v-for="(v, k) in circleInfo.pics" :key="k" :src="v" style="width: 100%;" mode="widthFix" />
					</template>
					<!-- <template v-if="circleInfo.user.user_service && circleInfo.user.user_service.content">
						<view class="font-size36-bold" style="margin-bottom: 20rpx;">{{circleInfo.user.user_service.title || ''}}</view>
						{{circleInfo.user.user_service.content || '暂无公司介绍'}}
						<template v-if="circleInfo.user.user_service.pic.length">
							<view style="margin-top: 20rpx;"></view>
							<image v-for="(v, k) in circleInfo.user.user_service.pic" :key="k" :src="v" style="width: 100%;" mode="widthFix" />
						</template>
					</template>
					<template v-else>
						{{circleInfo.user.service || '暂无公司介绍'}}
						<template v-if="circleInfo.user.service_pics && circleInfo.user.service_pics.length">
							<view style="margin-top: 20rpx;"></view>
							<image v-for="(v, k) in circleInfo.user.service_pics" :key="k" :src="v" style="width: 100%;" mode="widthFix" />
						</template>
					</template> -->
				</view>
				<!-- <view v-else>
					<emptyPage title='暂无介绍' />
				</view> -->
			</view>
			<service :list="list" :type="2" v-else-if="check_nav == 1 && check_nav_two == 2" :isGroupLeader="userInfo.uid == circleInfo.uid ? circleInfo.id : 0" @hasBlockLine="hasBlockLine" @hasNoneLine="hasNoneLine" @delCommunity="delCommunity"></service>
			<videoList :list="list" v-else-if="check_nav == 2"></videoList>
			<userProduct :list="list" v-else-if="check_nav == 4"></userProduct>
			<view v-else-if="check_nav == 5" class="user_circle_list">
				<view v-for="(item, index) in list" :key="index" class="item-content">
					<view class='item-avatar'>
						<image @click="goUserDetail(item.uid)" :src="item.avatar || '/static/images/f.png'" />
						<view class="item-user-icon">
							<image v-if="!item.is_start" @click.stop="followAuthor(index, 1)" :src="domain + '/uploads/def/20230709/128e2b523dc46080c40bf86b5bde2c83.png'" />
							<image v-else @click.stop="followAuthor(index, 0)" :src="domain + '/uploads/def/20230709/5e62394195454a9c2894ae3865495547.png'" />
						</view>
					</view>
					<view @click="goUserDetail(item.uid)" class='item-nickanme line1'>
						{{item.nickname}}
					</view>
					<view @click="goUserDetail(item.uid)" class='item-label line1'>
						{{item.label[1] ? item.label[1] : item.label[0]}}
					</view>
					<view class="tab-wx" @click="getUserContactInformations(item, 'we_chat_account', 1)">加微信</view>
				</view>
			</view>
		</view>
		<view v-else class='circle_content'>
			<emptyPage title="正在加载中···" />
		</view>
		<!-- 二维码弹窗 -->
		<view class="popup_qrcode_ceng" v-show="is_popup_qrcode" @click="is_popup_qrcode=false">
			<view class="popup_qrcode_content">
				<image :src="circleInfo.qr_code" mode="widthFix" @click="showImage" />
				<view class="font-size36-bold" @click="saveQrCode(circleInfo.qr_code)" style="background-color: #FFE103;text-align: center;padding: 20rpx 30rpx;border-radius: 10rpx;">长按保存到相册</view>
			</view>
		</view>
		<!-- 二维码弹窗end -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- 首次进入分享二维码弹窗 -->
		<view class="first_entry_ceng" v-if="first_entry_circle == 2 && circle_share_poster">
			<view class="first_entry_circle" style="top: 150rpx;">
				<view class="first_entry_c_head" style="justify-content: flex-end;position: absolute;right: 30rpx;">
					<view class="first_entry_c_close" @click="first_entry_circle = 0">
						<image  :src="domain + '/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png'" />
					</view>
				</view>
				<image :src="circle_share_poster" style="width: 100%;" mode="widthFix" :show-menu-by-longpress="true" />
				<!-- @longpress="saveImageToPhotosAlbum" -->
			</view>
		</view>
		<view class="first_entry_ceng" v-if="first_entry_circle == 1">
			<view class="first_entry_circle">
				<view class="first_entry_c_head">
					<view class="first_entry_c_title font-size36-bold">恭喜你</view>
					<view class="first_entry_c_close" @click="first_entry_circle = 0">
						<image  :src="domain + '/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png'" />
					</view>
				</view>
				<view class="first_entry_c_tips line1 font-size36-500">
					成功加入{{circleInfo.title}}圈子
				</view>
				<view class="first_entry_c_qrcode" v-if="circleInfo.user_qrcode">
					<image :src="circleInfo.user_qrcode" />
				</view>
				<view class="first_entry_c_tips font-size36-500">
					分享收益
				</view>
				<view class="first_entry_c_tips font-size36-500">
					你将获得60%新成员加入收益
				</view>
				<button open-type="share" @click="userShare()" class="first_entry_c_button font-size36-500">
					分享赚钱
				</button>
			</view>
		</view>
		<!-- 发布服务 -->
		<view class="create_community">
			<image src="http://ly.jukee.net/uploads/default/20230626/2d7b745cc731b85098c4adbdd64a459c.png" @click="openPublishPopup" />
		</view>
		<publishPopup :isPublishPopup="isPublishPopup" @closePublishPopup="closePublishPopup" :type="1" :circleId="id"></publishPopup>
		
		<!-- 手机号微信查看弹窗 -->
		<view class="popup_user_contact" v-if="is_popup_user_contact" @click="is_popup_user_contact=false">
			<view class="popup_user_contact_c">
				<view class="popup_user_contact_h">
					<view class="popup_user_contact_t">提示</view>
					<view class="popup_user_contact_u">{{popup_user_contact_type == 'phone' ? '电话：' : '微信号：'}}<text>{{popup_user_contact}}</text></view>
				</view>
				<view class="popup_user_contact_b">
					<view class="popup_user_contact_close" @click="is_popup_user_contact=false">取消</view>
					<view class="popup_user_contact_copy" @click="copyUserContact">复制</view>
				</view>
			</view>
		</view>
		
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
		<view class="back_popup flex-aj-center" @click="wechat_qrcode_img = ''" v-if="wechat_qrcode_img">
			<image :src="wechat_qrcode_img" style="width: 500rpx;border-radius: 20rpx;" mode="widthFix" @click="previewImage(wechat_qrcode_img)">
		</view>
	</view>
</template>

<script>
	 
	import { getCircleCommunity, followAuthorApi } from '@/api/community.js';
	import {
		getCircle,
		getCircleSharePosted,
		getListCircle,
		getCircleAdvertisementList,
		getAttentionCircle,
		recommendCommunity
	} from "@/api/circle";
	import { getUserInfo, recommendCustom, getUserContactInformation } from '@/api/user.js';
	import { getUserProductList } from "@/api/user_product"
	import { mapGetters } from "vuex";
	import { configMap } from '@/utils';
	import authorize from '@/components/Authorize';
	import videoList from '@/components/videoList/index.vue';
	import service from '@/components/service/index.vue';
	import demand from '@/components/demand/index.vue';
	import userProduct from '@/components/userProduct/index.vue';
	import emptyPage from '@/components/emptyPage.vue'
	import publishPopup from '@/components/publishPopup';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			authorize,
			service,
			demand,
			videoList,
			userProduct,
			emptyPage,
			publishPopup
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				isShowAuth: false, //是否隐藏授权
				isAuto: false, //没有授权的不会自动授权
				circleInfo: {},
				circle_recmmand_list: [],
				userInfo: {},
				tab: 0,
				id: '',
				is_add_advertisement: false,
				check_nav: 1,
				check_nav_two: 2,// 二级选择
				list:[],
				isScroll: true,
				page: 1,
				limit: 10,
				circle_advertisement: [], //服务广告列表
				is_popup_qrcode: false,
				first_entry_circle: 0, // 1首次进入人脉圈
				share_qrcode: '', // 分享图片
				isPublishPopup: false, // 发布服务
				circle_share_poster: '', // 分享海报
				popup_user_contact: '',
				is_popup_user_contact: false,
				popup_user_contact_type: '',
				user_vip_tips: false,
				wechat_qrcode_img: '', // 微信二维码
			}
		},
		created() {},
		computed: configMap({is_community_video_start: 0}, mapGetters(['isLogin', 'viewColor', 'keyColor'])),
		/* computed: {
			...mapGetters(['isLogin','viewColor']),
		}, */
		watch: {},
		onLoad: function(options) {
			let that = this;
			// #ifdef MP
			if (options.scene) {
				let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
				options.id = value.id;
				options.check_nav = value.check_nav
			}
			// #endif
			// pages/plantGrass/plant_user/index
			that.id = options.id
			that.check_nav = options.check_nav || 1;
			if (that.isLogin) {
				getAttentionCircle(that.id).then(res=>{
					if(!res.data.pay_type){
						return that.$util.Tips({endtime: 0}, {tab: 4, url: '/pages/extends/circle_create/circle_pay?id='+that.id});
					} else {
						that.getCircleInfo(that.id);
						that.getUserInfo();
						that.getList();
					}
				})
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
			that.getCircleAdvertisementLists();
		},
		onShow() {
			
		},
		onReady() {},
		mounted: function() {},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions :{
						itemList:['保存图片']
					},
				})
			},
			handleScroll() {  
			   // 获取滚动高度  
				const scrollHeight = event.detail.scrollTop;  
				console.log('滚动高度:', scrollHeight);  
			},
			// 圈子用户
			circleUserList() {
				this.$util.Tips('/pages/extends/user/recommend_user?circle_id='+this.circleInfo.id)
			},
			setNavs(navs) {
				this.is_add_advertisement = false;
				this.check_nav = navs;
				this.isScroll = true;
				this.page = 1;
				this.getList();
			},
			getList() {
				let that = this;
				if(!that.isScroll) return false;
				if (that.check_nav == 5) {
					// 人脉圈圈友列表
					let data = {
						page: that.page,
						limit: 30,
						circle_id: that.id,
					}
					recommendCustom(data).then(res => {
						if (that.page == 1) {
							that.list = res.data.list;
						} else {
							that.list = that.list.concat(res.data.list);
						}
						that.isScroll = res.data.list.length >= that.limit;
						that.page++
					})
				} else if (that.check_nav == 4) {
					// 搜索好货
					let data = {
						page: that.page,
						limit: that.limit,
						is_show: 1,
						status: 1,
						circle_id: that.id
					}
					getUserProductList(data).then(res=>{
						if (that.page == 1) {
							that.list = res.data.list;
						} else {
							that.list = that.list.concat(res.data.list);
						}
						that.isScroll = res.data.list.length >= that.limit;
						that.page++
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				} else {
					let data = {
						is_type: that.check_nav,
						circle_id: that.id,
						page: that.page,
						limit: that.limit,
						is_top_service: that.check_nav == 1 ? 1 : '',
					}
					recommendCommunity(data).then(res=>{
						if (that.page == 1) {
							that.list = res.data.list || [];
						} else {
							that.list = that.list.concat(res.data.list);
						}
						that.isScroll = res.data.list.length >= that.limit
						that.page++;
					}).catch(err=>{
						console.log(err)
					})	
				}
			},
			getCircleAdvertisementLists() {
				let that = this,
				circle_id = that.id;
				getCircleAdvertisementList(circle_id).then(res=>{
					that.circle_advertisement = res.data || [];
				}).catch(err=>{
					
				})
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			authOpen: function() {
				let that = this;
				if (that.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				}
			},
			/*获取人脉圈信息*/
			getCircleInfo(id){
				let that = this;
				getCircle(id, {circle_type: 1}).then(res => {
					that.circleInfo = res.data
					that.first_entry_circle = res.data.first_entry_circle;
					that.getCircleRecommandList();
					getCircleSharePosted(id, {}).then(res => {
						that.circle_share_poster = res.message;
					})
				});
			},
			saveImageToPhotosAlbum() {
				let that = this;
			  uni.saveImageToPhotosAlbum({  
				filePath: that.circle_share_poster, // 图片路径  
				success: function () {  
				  uni.showToast({  
					title: '图片保存成功',  
					icon: 'success',  
					duration: 2000  
				  });  
				},  
				fail: function (err) {  
				  console.log(err);  
				}  
			  });  
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			getCircleRecommandList(){
				let that = this;
				let data = {
					label_id: that.circleInfo.label_id,
					label_id2: that.circleInfo.label_id2,
					page: 1,
					limit: 30,
					tab_index: 1,
					not_circle_id:  that.circleInfo.id,
				}
				getListCircle(data).then(res => {
					if(res.status == 200)
					{
						that.circle_recmmand_list = that.circle_recmmand_list.concat(res.data.list)
					}
				}).catch(err=>{
				})
			},
			/**
			 * 添加服务广告
			 */
			addCircleAdvertisement(url = ''){
				if (url) {
					let that = this;
					uni.previewImage({
						urls: [url],
						longPressActions :{
							itemList:['保存图片'],
							success(data) {
								let imgurl = url
								that.saveImage(imgurl)
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						},
						
					})
				} else {
					this.$util.Tips('/pages/extends/circle_create/create_circle_advertisement?circle_id='+this.id)
				}
				// if (appid == 'wx355aae58ef38d161') {
				// 	uni.navigateToMiniProgram({
				// 		appId: 'wx355aae58ef38d161',
				// 		path: "/pages/index/index",
				// 		success(res) {},
				// 		fail(err) {},
				// 	});
				// }
			},
			saveImage(imgurl){
				// console.log(imgurl)
				uni.downloadFile({
					url:imgurl,
					success(res){
						// console.log(res)
						let url = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath:url,
							success() {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail(err) {
								console.log('保存失败',err)
								uni.showToast({
									title:'保存失败',
									icon:"none"
								})
							}
						})
					}
				})
			},
			/**
			 * 服务广告跳转详情
			 */
			toCommunityDetail(community_id) {
				this.$util.Tips('/pages/plantGrass/plant_user/index?uid='+community_id)
			},
			/**
			 * 进入人脉圈检测
			 */
			getAttentionCircles(circle_id) {
				let that = this;
				if(circle_id == that.id) return false;
				getAttentionCircle(circle_id).then(res=>{
					if(res.status == 200 && res.data.pay_type){
						return that.$util.Tips('/pages/extends/circle_create/circle_info?id='+circle_id)
					}
					return that.$util.Tips('/pages/extends/circle_create/circle_pay?id='+circle_id);
				})
			},
			goUrl(url) {
				let that = this;
				/* if(this.userInfo.is_svip <= 0 && '/pages/extends/circle_create/index' == url) {
					return that.user_vip_tips = true;
				} */
				that.$util.Tips(url)
			},
			hasBlockLine(index){
				this.$set(this.list[index], 'is_line', false);
			},
			hasNoneLine(index){
				this.$set(this.list[index], 'is_line', true);
			},
			delCommunity(index) {
				let list = this.list;
				list.splice(index, 1);
				this.$set(this, 'list', list);
			},
			getCircleListMore() {
				let that = this;
				let url = '/pages/extends/circle_create/circle_list?label_id='+that.circleInfo.label_id+'&label_id2='+that.circleInfo.label_id2;
				that.$util.Tips(url)
			},
			openPublishPopup() {
				if (this.circleInfo.uid == this.userInfo.uid && this.check_nav == 5) {
					this.$util.Tips('/pages/extends/circle_create/index?id='+this.circleInfo.id)
				} else {
					this.isPublishPopup = true;
				}
			},
			closePublishPopup() {
				this.isPublishPopup = false;
			},
			// 用户详情
			goUserDetail(uid) {
				this.$util.Tips('/pages/plantGrass/plant_user/index?id='+uid)
			},
			// 关注作者
			followAuthor: function(key, status) {
				if (this.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				} else {
					let that = this;
					followAuthorApi(that.list_circle[key].uid,{status: status}).then(res => {
						if (res.status === 200) {
							that.list_circle[key].is_start = status
						}
						that.$util.Tips({
							title: res.message
						});
					}).catch(err=>{
						that.$util.Tips({
							title: err
						});
					});
				}
			},
			saveQrCode(url) {
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.downloadFile({  
									    url: url,  
									    success: function (res) {  
									        // 调用 uni.saveImageToPhotosAlbum 将图片保存到相册  
									        uni.saveImageToPhotosAlbum({  
									            filePath: res.tempFilePath,  
									            success: function (saveRes) {  
									                console.log('保存成功');  
									            },  
									            fail: function (err) {  
									                console.log('保存失败', err);  
									            }  
									        });  
									    }  
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: url,
								success: function(res) {
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									that.$util.Tips({
										title: '保存失败'
									});
								}
							});
						}
					}
				});
			},
			showImage() {
				let that = this;
				uni.previewImage({
					urls: [that.circleInfo.qr_code], // 图片数组，这里只有一张图片
					current: that.circleInfo.qr_code,// 当前显示的图片链接I
				});
			},
			openPopupQrcode() {
				if (!this.circleInfo.qr_code) {
					return this.$util.Tips({
						title: '圈主还未上传群二维码'
					})
				}
				this.is_popup_qrcode = true
			},
			/**
			 * 查看会员联系方式
			 * @param {Object} uid
			 * @param {Object} contact_information
			 */
			getUserContactInformations(data, contact_information, is_weixin = 0) {
				if(!this.isLogin) return this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'});
				let that = this;
				let uid = data.uid;
				if (!uid) return this.$util.Tips({title: '缺少请求用户'});
				getUserContactInformation({uid, contact_information, is_weixin}).then(res=>{
					if(contact_information == 'phone' && checkPhone(res.message)) {
						return uni.makePhoneCall({
							phoneNumber: res.message // 替换为你想拨打的电话号码
						  }).then(() => {
							console.log('拨打电话成功')
						  }).catch((error) => {
							console.log('拨打电话失败', error)
						  })
					} else {
						if (res.data && res.data.is_img == 1) {
							that.wechat_qrcode_img = res.data.data;
						} else {
							if (res.message) {
								that.popup_user_contact = res.message || '暂未设置该联系方式'
								that.popup_user_contact_type = contact_information;
								that.is_popup_user_contact = true;
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '等待对方验证',
									showCancel: false,
								})
							}
						}
					}
				}).catch(err=>{
					if(err == '次数不足') {
						that.user_vip_tips = true;
						// that.pay_close = true;
					} else {
						that.$util.Tips({title: err});
					}
				})
			},
			copyUserContact() {
				let that = this;
				that.is_popup_user_contact = false;
				if(this.popup_user_contact && this.popup_user_contact!='暂未设置该联系方式') {
					uni.setClipboardData({
					  data: that.popup_user_contact,
					  success: function () {
						return that.$util.Tips({title:'复制成功'});
					  }
					})
				}else{
					return this.$util.Tips({title:'复制失败'});
				}
			},
		},
		onReachBottom() {
			this.getList();
		},
		onPullDownRefresh(){},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			that.share_qrcode = that.first_entry_circle == 1 ? that.circleInfo.user_qrcode : '';
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: that.circleInfo.title,
				imageUrl: that.share_qrcode,
				path: '/pages/extends/circle_create/circle_info?id='+that.circleInfo.id+'&spid=' + that.userInfo.uid
			}
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.circleInfo.title,
				query: {
					spid: that.userInfo.uid
				},
				imageUrl:  that.share_qrcode
			};
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
.container{
	background: #FFFFFF;
	min-height: 100vh;
}
.header{
	width: 750rpx;
	padding: 36rpx 30rpx 62rpx;
	background-repeat: no-repeat;
	background-size: 100%;
	background: #FFE103;
	.user_wrapper{
		flex-wrap: nowrap;
		// align-items: center;
		.create_circle {
			margin-left: auto;
		}
		.image,uni-image,image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		.user_text{
			margin-left: 30rpx;
			.name{
				font-size: 44rpx;
				font-weight: 500;
				color: #323232;
				line-height: 60rpx;
			}
			.circle-item-gz {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				.circle-item-gz-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.circle-item-gz-num {
					font-size: 28rpx;
					font-weight: 400;
					color: #323232;
					line-height: 34rpx;
					margin-left: 4rpx;
				}
			}
			.circle-item-gz-user {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				image {
					width: 44rpx;
					height: 44rpx;
					border-radius: 100%;
					margin-left: -10rpx;
				}
				image:first-child {
					margin-left: 0rpx;
				}
				.circle-item-gz-tl {
					margin-left: 10rpx;
				}
			}
			.circle_recmmand_title {
				font-size: 30rpx;
				font-weight: 500;
				color: #323232;
				line-height: 42rpx;
				margin-top: 36rpx;
			}
		}
	}
	
	.follow_btn{
		font-size: 28rpx;
		font-weight: 500;
		color: #323232;
		line-height: 40rpx;
		background: #FFFFFF;
		border-radius: 31rpx;
		padding: 6rpx 24rpx;
		white-space: nowrap;
	}
	.circle_qr {
		margin-top: 40rpx;
		width: 120rpx;
		color: #fff;
		.circle_qr_img {
			width: 120rpx;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
		.circle_qr_tip {
			font-size: 20rpx;
			font-weight: 400;
			color: #323232;
			line-height: 28rpx;
			text-align: center;
		}
	}
}
.circle_recmmand {
	// padding-left: 190rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	overflow: hidden;
	.circle_recmmand_tit {
		white-space: nowrap;
		font-weight: bold;
	}
	.circle_recmmand_list {
		flex: 1;
		display: flex;
		align-items: center;
		// padding-top: 10rpx;
		margin-left: 30rpx;
		overflow: hidden;
		.circle_recmmand_list_c {
			/* display: grid;
			grid-template-columns: repeat(1000, 1fr);
			grid-column-gap: 10rpx; */
			grid-gap: 5rpx;
			flex: 1;
			display: flex;
			overflow: auto;
			image {
				flex-shrink: 0;
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
			}
		}
		.circle_recmmand_left {
			width: 30rpx;
			margin-left: 10rpx;
			image {
				width: 20rpx;
			}
		}
	}
}
.tabNav {
	padding: 20rpx 0 40rpx;
	display: flex;
	background-color: #EFEFEF;
	position: relative;
	align-items: center;
	z-index: 1;
	.tabNav-item {
		flex: 1;
		text-align: center;
		border-right: 1rpx solid #ccc;
		.tabNav-item-name {
			font-size: 34rpx;
			font-weight: 500;
			color: #323232;
			line-height: 48rpx;
			position: relative;
		}
		.on {
			font-size: 38rpx;
			font-weight: 500;
			color: #323232;
			line-height: 52rpx;
			&::after{
				content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: -20rpx;
			}
		}
	}
	.tabNav-item-img {
		width: 23rpx;
		margin-right: 36rpx;
		image {
			width: 23rpx;
			height: 23rpx;
		}
	}
}
.service-select {
	margin: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 34rpx;
	border-top: 1rpx solid #ADADAD;
	padding: 10rpx;
	.service-select-btn1 {
		flex: 1;
		padding: 10rpx;
		border-right: 1rpx solid #ADADAD;
	}
	.service-select-btn2 {
		flex: 1;
		padding: 10rpx;
	}
	.service-select-btnon {
		font-weight: bold;
	}
}
.circle_advertisement {
	position: relative;
	margin: 30rpx;
	.swiper {
		height: 345rpx;
	}
	.swiper-item {
		background-color: #fff;
		border-radius: 10rpx;
	}
	.swiper-item-img image {
		width: 100%;
		height: 345rpx;
		border-radius: 10rpx 10rpx 0 0;
	}
}
.circle_content {
	padding: 0 30rpx;
}

.popup_qrcode_ceng {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 1;
	.popup_qrcode_content { 
		width: 500rpx;
		margin: 20vh auto;
		image {
			width: 100%;
		}
		.popup_content {
			background-color: #fff;
			font-size: 35rpx;
			font-weight: bold;
			text-align: center;
			padding: 50rpx 20rpx 20rpx;
			border-radius: 10rpx;
		}
		.popup_tel {
			
		}
		.popup_close {
			background-color: var(--view-theme);
			padding: 20rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
}
// 用户列表
.productSort .conter .list {
	flex-wrap: wrap;
	background: #fff;
	border-radius: 16rpx;
	padding-bottom: 26rpx;
}
.productSort .conter .list .item {
	width: 174rpx;
	margin-top: 26rpx;
}
.user_circle_list .item .picture,
.user_circle_list .item image,
::v-deep .easy-loadimage{
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
}
.user_circle_list .item .name {
	font-size: 24rpx;
	color: #333;
	height: 56rpx;
	line-height: 56rpx;
	width: 120rpx;
	text-align: center;
}
.user_circle_list {
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40rpx;
	margin-top: 40rpx;
	.item-content {
		text-align: center;
		overflow: hidden;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		.item-avatar {
			width: 98rpx;
			height: 98rpx;
			margin: 0 auto;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}
			.item-user-icon {
				position: absolute;
				bottom: -16rpx;
				width: 36rpx;
				height: 36rpx;
				image {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
				}
			}
		}
		.item-nickanme {
			font-size: 28rpx;
			font-weight: 500;
			color: #37393A;
			line-height: 40rpx;
			margin-top: 30rpx;
		}
		.item-label {
			font-size: 24rpx;
			font-weight: 400;
			color: #767676;
			line-height: 34rpx;
			margin-top: 6rpx;
		}
		.tab-wx {
			background-color: #05C436;
			color: #fff;
			width: 65%;
			font-weight: bold;
			margin: 20rpx auto 0;
			padding: 10rpx 0;
			/* position: absolute;
			left: 20%;
			right: 20%;
			bottom: -20rpx; */
			font-size: 24rpx;
			border-radius: 50rpx;
		}
	}
}
// 用户列表end
// 首次进入人脉圈弹窗分享二维码
.first_entry_ceng {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	z-index: 1;
	.first_entry_circle {
		position: absolute;
		left: 86rpx;
		right: 86rpx;
		top: 260rpx;
		background-color: #fff;
		border-radius: 30rpx;
		border: 1px solid #000;
		padding: 30rpx;
		.first_entry_c_head {
			display: flex;
			justify-content: center;
			.first_entry_c_title {
				flex: 1;
				text-align: center;
			}
			.first_entry_c_close {
				width: 70rpx;
				height: 70rpx;
				image {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
		.first_entry_c_tips {
			margin-top: 10rpx;
			text-align: center;
		}
		.first_entry_c_qrcode {
			margin-top: 10rpx;
			text-align: center;
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}
		.first_entry_c_button {
			background-color: #FFE103;
			width: fit-content;
			margin: 10rpx auto 0;
			padding: 10rpx 100rpx;
			border-radius: 50rpx;
			// border: 1px solid #000;
		}
	}
}
// 发布服务
.create_community {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 190rpx;
	width: 100%;
	text-align: center;
	image {
		width: 120rpx;
		height: 120rpx;
	}
}
// 展示用户手机号/微信弹窗
.popup_user_contact {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 35;
	display: flex;
	align-items: center;
	justify-content: center;
	.popup_user_contact_c { 
		width: 480rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		.popup_user_contact_h {
			padding: 30rpx 30rpx 80rpx;
			border-bottom: 1rpx solid #DDDDDD;
			.popup_user_contact_t {
				font-size: 36rpx;
				font-weight: 550;
				color: #2C332D;
			}
			.popup_user_contact_u{
				font-size: 32rpx;
				font-weight: 550;
				color: #323232;
				margin-top: 32rpx;
				text {
					color: #F73D3B;
				}
			}
		}
		.popup_user_contact_b {
			padding: 20rpx 0;
			text-align: center;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.popup_user_contact_close {
				font-size: 28rpx;
				font-weight: 400;
				color: #666764;
				line-height: 40rpx;
				flex: 1;
			}
			.popup_user_contact_copy {
				font-size: 28rpx;
				font-weight: 400;
				color: #323232;
				line-height: 40rpx;
				border-left: 1rpx solid #DDDDDD;
				flex: 1;
			}
		}
	}
}
// 展示用户手机号/微信弹窗end
// 升级VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	// margin: 50% 50rpx 0;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	z-index: 35;
	.user_vip_close {
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
</style>
